<!-- 购买详情页面 -->
<template>
	<view class="buydetails">
		<view class="top">
			<image :src="coupon_img_1" mode="scaleToFill"></image>
			<view class="m-tit">
				<text>{{ name }}</text>
				<text>免费</text>
			</view>
			<view class="f-tit">
				<text>有效期：{{start_time}}-{{end_time}}</text>
				<text>¥{{price}}</text>
			</view>
		</view>
		<view class="m-box">
			<view class="t-item">
				<p>使用流程</p>
				<view class="lz-box">
					<view class="item">
						<image src="../../../static/images/chenggong.png" mode="aspectFit"></image>
						<text>支付成功</text>
					</view>
					<view class="item">
						<image src="../../../static/images/quan.png" mode="aspectFit"></image>
						<text>到店展示券</text>
					</view>
					<view class="item">
						<image src="../../../static/images/erweima.png" mode="aspectFit"></image>
						<text>展示二维码核销</text>
					</view>
				</view>
			</view>
			<view class="item-1">
				<text>使用场景</text>
				<text>{{scene_label}}</text>
			</view>
			<view class="item-1">
				<text>商户名称</text>
				<text>{{business_name}}</text>
			</view>
			<view class="item-2" @tap="seeLocation">
				<view class="left">
					<text>商户位置</text>
					<view class="right">
						<text>{{city}}{{area}}</text>
						<image src="../../../static/images/daohang.png" mode="aspectFit"></image>
					</view>
				</view>
				<p>{{address}}</p>
			</view>
			<view class="item-1">
				<text>使用时间</text>
				<text>{{start_time}}-{{end_time}}</text>
			</view>
			<view class="item-1">
				<text>商户领取限额</text>
				<text>{{company_num}}张</text>
			</view>
			<view class="item-1">
				<text>个人领取限额</text>
				<text>{{person_num}}张</text>
			</view>
			<view class="item-1">
				<text>商家电话</text>
				<text @tap="phoneCall">{{link_mobile}}</text>
			</view>
			<view class="sygz-box">
				<text>使用说明</text>
				<view class="item-tit">
					<p>{{rule}}</p>
				</view>
			</view>
		</view>
		<view @click="getconfirmreceive" class="b-btn">
			<button>立即领取</button>
		</view>
		
	</view>
</template>

<script>
	import {shareMixins} from '../../../mixins/share.js'
	export default {
		mixins:[shareMixins],
		data() {
			return {
				shareData: {
				    title: '空港卡券联盟商户端',
				    path: '/pages/mine/mine' // 分享的页面路径
				},
				id:'',//上个页面的ID
				name:'',
				coupon_img_1:'',
				start_time:'',
				end_time:'',
				price:'',
				city:'',
				area:'',
				address:'',
				person_num:'',
				link_mobile:'',
				rule:'',
				scene_label:'',
				business_name:'',
				company_num:'',
				latitude:'',
				longitude:''
			}
		},
		onLoad(e){
			// console.log(e);
			this.id = e.id
			this.getCouponDetailById()
		},
		methods: {
			async getCouponDetailById(){//根据ID获取卡券详细信息
				const res = await this.$myRequest({
					url:'/api/businessCoupon/getCouponDetailById?id='+ this.id
				}).then((res) => {
					console.log(res.data.data)
					uni.setStorageSync('lqkqDetails',res.data.data)
					this.name = res.data.data.name
					this.coupon_img_1 = res.data.data.coupon_img_1
					var start_time = res.data.data.start_time	
					var end_time = res.data.data.end_time
					this.start_time = (new Date(parseInt(start_time) * 1000).toLocaleString().substr(0,9))
					this.end_time = (new Date(parseInt(end_time) * 1000).toLocaleString().substr(0,9)) 
					this.price = res.data.data.price
					this.city = res.data.data.city
					this.area = res.data.data.area
					this.address = res.data.data.address
					this.person_num = res.data.data.person_num
					this.link_mobile = res.data.data.link_mobile
					this.rule = res.data.data.rule
					this.scene_label = res.data.data.scene_label
					this.business_name = res.data.data.business_name
					this.company_num = res.data.data.company_num
					this.latitude =  parseFloat(res.data.data.lat)
					this.longitude = parseFloat(res.data.data.lng)
				})
			},
			seeLocation(){//使用手机内置导航
				var _this = this
				uni.openLocation({
					latitude: _this.latitude,
					longitude: _this.longitude,
					addres:_this.address,
					name:_this.business_name
				})
			},
			getconfirmreceive(){//跳转确认领取页面
				uni.navigateTo({
					// url:'./confirmreceive/confirmreceive'
					url:'../confirmreceive/confirmreceive'
				})
			},
			phoneCall(){//拨打电话
				var _this = this
				uni.makePhoneCall({
				    phoneNumber: _this.link_mobile 
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.buydetails{
		.top{
			background-color: #FFFFFF;
			padding: 20rpx 32rpx 34rpx 32rpx;
			image{
				width: 100%;
				height: 252rpx;
				margin-bottom: 28rpx;
			}
			.m-tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 6rpx;
				text{
					font-size: 40rpx;
					font-weight: bold;
					color: #3C3C3C;
				}
				text:nth-child(2){
					color: #EC5F2F;
				}
			}
			.f-tit{
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 24rpx;
					color: #8B8B8B;
				}
				text:nth-child(2){
					font-size: 28rpx;
					color: #8B8B8B;
					text-decoration:line-through;
				}
			}
		}
		.m-box{
			padding: 20rpx 32rpx 30rpx 32rpx;
			background-color: #FFFFFF;
			margin-top: 16rpx;
			.t-item{
				margin-bottom: 40rpx;
				p{
					font-size: 32rpx;
					color: #3C3C3C;
					font-weight: bold;
				}
				.lz-box{
					margin-top: 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.item{
						display: flex;
						align-items: center;
						image{
							width: 28rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
						text{
							font-size: 24rpx;
							color: #8B8B8B;
							font-weight: bold;
						}
					}
				}
			}
			.item-1{
				padding: 34rpx 0;
				border-top: 2rpx solid #F6F6F7;
				display: flex;
				align-items: center;
				justify-content: space-between;
				text{
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}
				text:nth-child(2){
					font-size: 32rpx;
					color: #3C3C3C;
					font-weight: 200;
				}
			}
			.item-2{
				padding: 34rpx 0;
				border-top: 2rpx solid #F6F6F7;
				.left{
					display: flex;
					justify-content: space-between;
					text{
						font-size: 32rpx;
						color: #333333;
						font-weight: bold;
					}
					.right{
						display: flex;
						align-items: center;
						text{
							font-size: 32rpx;
							color: #3C3C3C;
							font-weight: 200;
						}
						image{
							width: 19rpx;
							height: 27rpx;
							margin-left: 30rpx;
						}
					}
				}
				p{
					font-size: 32rpx;
					color: #3C3C3C;
					font-weight: 200;
					text-align: right;
					margin-top: 32rpx;
				}
			}
			.sygz-box{
				margin-top: 68rpx;
				text{
					font-size: 32rpx;
					color: #3C3C3C;
					font-weight: bold;
				}
				.item-tit{
					margin-top: 20rpx;
					line-height: 40rpx;
					p{
						font-size: 28rpx;
						font-weight: 200;
						color: #3C3C3C;
					}
				}
			}
		}
		.b-btn{
			padding: 20rpx 32rpx 88rpx 32rpx;
			background-color: #FFFFFF;
			button{
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50rpx;
				background: linear-gradient(#FFB487,#EC5F2F);
				color: #FFFFFF;
				font-size: 36rpx;
			}
			
		}
	}
</style>
